<template>
  <div class="scrollbar_sidebar">
    <el-scrollbar>
      <el-menu
          :default-active="nowTagValue"
          mode="vertical"
          :collapse="!collapse"
          :collapse-transition="false"
          popper-class="sidebar_menu"
      >
        <sidebar-item :menu="menu"></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import sidebarItem from "./sidebar-item.vue";

export default {
  components: {sidebarItem},
  data() {
    return {};
  },
  props: {
    menu: {
      type: Array,
      default: [],
    },
  },
  computed: {
    ...mapGetters(["model", "collapse", "modelId"]),
    nowTagValue: function () {
      return this.$route.path;
    },
  },
  watch: {
    menu(newVal) {
      this.updateCollapse(newVal);
    },
  },
  mounted() {
    this.updateCollapse(this.menu);
  },
  methods: {
    updateCollapse(newVal) {
      if (!newVal || newVal.length === 0) {
        this.$store.dispatch("UpdateCollapse", false);
      } else {
        this.$store.dispatch("UpdateCollapse", true);
      }
    },
  },
};
</script>

<style>
.sidebar_menu {
  font-size: 40px !important;
}
</style>
